<template>
    <div :class="{active:isActive}" @click="showInfo" class="friend">
      <el-avatar
        :src="avatar"
        shape="square"
      ></el-avatar>
      <span>{{name}}</span>
    </div>
</template>

<script>
  import {mapGetters} from 'vuex'
    export default {
        name: "Friend",
      computed:{
        ...mapGetters([
          'friendList','currentFriendInfo'
        ]),
        isActive(){
          return this.userId === this.currentFriendInfo.userid
        }
      },
      props:{
        avatar:{
          type:String,
          default:require('@/assets/img/defaultImg.gif')
        },
        name:{
          type: String,
          default:"默认的"
        },
        index: {
          type:Number,
          default: -1
        },
        userId:{
          type:String,
          default:''
        }
      },
      methods:{
        showInfo(){
          this.$store.commit('chat/SET_FRIEND_ACTIVE',"friend-info")
          let friend = this.friendList[this.index]
          this.$store.commit('chat/SET_CURRENT_FRIEND_INFO',friend)
        }
      }
    }
</script>

<style scoped>
  .friend {
    display: flex;
    font-size: 14px;
    /* 光标变小手 */
    cursor: pointer;
    width: 100%;
    height: 60px;
  }
  .friend:hover{
    background-color: #e3e5e5;
  }
  .friend .el-avatar{
    width: 38px;
    height: 38px;
    margin: 12px 12px;
  }
  .friend span {
    margin: 0 5px;
    line-height: 60px;
  }
  .active{
    background-color: #c4c7c7;
  }
  .active:hover{
    background-color: #c4c7c7;
  }
</style>
